
***************************************
*          @@  FLEX 3 @@              *                  
*                                     *
*   ------ >> Chapitre 16 << ------   *
*                                     *
***************************************






// Extrait du fichier HTML gnr charg de contenir lapplication
<!--  BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!--  END Browser History required section -->

<!--  BEGIN Browser History required section -->
<script src="history/history.js" language="javascript"></script>
<!--  END Browser History required section -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
< !-- Bouton permettant de passer  ltat suivant !-->
	<mx:Button label="Passer  la vue 2" id="button1" click="currentState='vue2'" x="46" y="21"/>
	
	<mx:states>
< !- tat secondaire !-->
	    <mx:State name="vue2">
	        <mx:RemoveChild target="{button1}"/>
	        <mx:AddChild position="lastChild">
	            <mx:Label text="vue 2" x="32" y="10" width="81" fontWeight="bold" fontSize="15"/>
	        </mx:AddChild>
	    </mx:State>
	</mx:states>

</mx:Application>
Le code suivant illustre limplmentation de ces lments :<mx:Script>
    <![CDATA[
        import mx.events.BrowserChangeEvent;
        import mx.managers.IBrowserManager;
        import mx.managers.BrowserManager;
    ]]>
</mx:Script>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initialiserUrl()" layout="absolute">
	
<mx:Button label="Passer  la vue 2" id="button1" click="currentState='vue2'; modifierURL('vue2')" x="46" y="21"/>

<mx:states>
	    <mx:State name="vue2">
	        <mx:RemoveChild target="{button1}"/>
	        <mx:AddChild position="lastChild">
	            <mx:Label text="vue 2" x="32" y="10" width="81" fontWeight="bold" fontSize="15"/>
	        </mx:AddChild>
	    </mx:State>
	</mx:states>

<mx:Script>
    <![CDATA[
        import mx.events.BrowserChangeEvent;
        import mx.managers.IBrowserManager;
        import mx.managers.BrowserManager;

        // Dclaration dune variable permettant de stocker linstance
        // de la classe BrowserManager
        public var navigateur:IBrowserManager;

        // A -- Procdure excute  linitialisation de lapplication
        private function initialiserUrl():void
        {
        // Rcupration de linstance du navigateur
         navigateur = BrowserManager.getInstance();
         
        // Initialisation de lURL du navigateur
         navigateur.init(""); // Vide = #
        
        // Dclenchement dun vnement  chaque changement de la valeur de lURL 
        // du navigateur
	        navigateur.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, actionSurUrl);

        }

        // B -- Procdure permettant dajouter des cls de navigation
        private function modifierURL(parametre:String):void
        {
            navigateur.setFragment(parametre);
        }

        // C -- Procdure danalyse de lURL du navigateur
        // dclenche  chaque modification de lURL du navigateur
        private function actionSurUrl(event:Event):void{

            // Rcupration de la cl de navigation
            var parametre:String = navigateur.fragment;

	            // En fonction de la cl, on affiche ltat correspondant
            if (parametre=="")
            {
                currentState="";
            }
            else
            {
                currentState='vue2';
            }
        }
    ]]>
</mx:Script>
	
</mx:Application>
<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="374" width="328">
	
<mx:Script>
	    <![CDATA[

	        // Importation de la classe ExternalInterface
	        import flash.external.ExternalInterface;
	
	        // Procdure dappel de la fonction JavaScript
	        // Passage en paramtres des nombres A et B
	        public function calculJavascript():void{
	            if (ExternalInterface.available) {
	                var procedureJavascript:String = "calculerSomme"
	                var s:String = ExternalInterface.call(procedureJavascript,Number(txt_a.text), Number(txt_b.text));
	            }
	        }
	    ]]>
</mx:Script>
	
	<mx:Panel width="313" height="177" layout="absolute" x="10" y="10" title="Flex -&gt; Conteneur Web" id="pAddition">
	    <mx:Form x="10" y="10" width="273" height="82" verticalScrollPolicy="off" horizontalScrollPolicy="off">
	        <mx:FormItem label="Nombre A :">
	            <mx:TextInput id="txt_a"/>
	        </mx:FormItem>
	        <mx:FormItem label="Nombre B :">
	            <mx:TextInput id="txt_b"/>
	        </mx:FormItem>
	    </mx:Form>

	    <mx:Button id="btnCalculer" x="10" y="100" label="Calculer" width="273" click="calculJavascript()"/>
	</mx:Panel>

</mx:Application>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">

<html>
	<head>
	    <title>Calcul de sommes </title>
	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <script type="text/javascript">
	        function calculerSomme(a,b) {
	            var nombreA = new Number(a);
	            var nombreB = new Number(b);
	            var total = a+b;
	            	document.getElementById("id_total").setAttribute("value",total);
	        }
	    </script>
	</head>
		
	<body>
	    <p>
	        <object id="fichierSWF" type="application/x-shockwave-flash" data="JsFlex.swf" width="328" height="374">
	            <param name="src" value="JsFlex.swf">
	            <param name='flashVars' value=''/>
	        </object>
	    </p>
	    <h1>Application Flex -> Conteneur web</h1>
	    <label>Somme des deux nombres : </label>
	    <input type="text" id="id_total" name="id_total" value=""/>
	</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">

<html>
	<head>
	    <title>Calcul de somme !</title>
	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <script type="text/javascript">
	        function calculerSomme(a,b) {
	            var nombreA = new Number(a);
	            var nombreB = new Number(b);
	            var total = a+b;
	            	document.getElementById("id_total").setAttribute("value",total);
	        }
	
	        function appelProcedureFlex() {
	            var nombreA = parseInt(document.getElementById("nb_a").getAttribute("value"));
	            var nombreB = parseInt(document.getElementById("nb_b").getAttribute("value"));
	            	document.getElementById("fichierSWF").calculerSomme(nombreA,nombreB);
	        }
	    </script>
	</head>
		
	<body>
	    <p>
	        <object id="fichierSWF" type="application/x-shockwave-flash" data="JsFlex.swf" width="328" height="374">
	            <param name="src" value="JsFlex.swf">
	            <param name='flashVars' value=''/>
	        </object>
	    </p>
	    <h1>Application Flex -> Conteneur web</h1>
	    <label>Somme des deux nombres : </label>
	    <input type="text" id="id_total" name="id_total" value=""/>
	    <hr/>
	    <form onSubmit="return false;">
	        <div>
	            <label>Nombre A :</label>
	            <input type="text" id="nb_a">
	        </div>
	        <div>
	            <label>Nombre B :</label>
	            <input type="text" id="nb_b" />
	        </div>
	        <input type="button" onClick="appelProcedureFlex()" value="Calculer">
	    </form>
	</body>
</html>
<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="374" width="328" creationComplete="aliasProcedure()">
	
<mx:Script>
	    <![CDATA[

// ---- FLEX -> CONTENEUR WEB ---
	        import flash.external.ExternalInterface;

	        public function calculJavascript():void{
	            if (ExternalInterface.available) {
	                var fonctionJavascript:String = "calculerSomme"
	                var s:String = ExternalInterface.call(fonctionJavascript,Number(txt_a.text), Number(txt_b.text));
	            }
	        }
	
	        // Cration dun alias pour la procdure de calcul
	        public function aliasProcedure():void {
	            	ExternalInterface.addCallback("calculerSomme",calculActionScript);
	        }
	
	        // Procdure de calcul
	        public function calculActionScript(a:Number, b:Number):void{
	            var somme:Number = a + b
	            txt_somme.text = String(somme);
	        }
	    ]]>
</mx:Script>	
	
	
	<mx:Panel width="313" height="177" layout="absolute" x="10" y="10" title="Flex -&gt; Conteneur Web" id="pAddition">
	    <mx:Form x="10" y="10" width="273" height="82" verticalScrollPolicy="off" horizontalScrollPolicy="off">
	        <mx:FormItem label="Nombre A :">
	            <mx:TextInput id="txt_a"/>
	        </mx:FormItem>
	        <mx:FormItem label="Nombre B :">
	            <mx:TextInput id="txt_b"/>
	        </mx:FormItem>
	    </mx:Form>

	    <mx:Button id="btnCalculer" x="10" y="100" label="Calculer" width="273" click="calculJavascript()"/>
	</mx:Panel>
	
	<mx:Panel x="10" y="208" width="308" height="156" layout="absolute" title="Conteneur web -&gt; Flex" id="pAdditionConteneur">
	    <mx:TextInput x="25" y="44" width="235" id="txt_somme"/>
	</mx:Panel>

</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="374" width="328" xmlns:ns1="bridge.*">

<ns1:FABridge/>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="374" width="328" layout="absolute" xmlns:ns1="bridge.*">
<ns1:FABridge/>
	
	<mx:Script>
	    <![CDATA[
	        // Procdure de calcul
	        public function calculActionScript(a:Number, b:Number):void {
	            var somme:Number = a + b;
	            txt_somme.text = String(somme);
	        }
    ]]>
</mx:Script>
	
	<mx:Panel x="10" y="10" width="308" height="156" layout="absolute" title="Conteneur web -&gt; Flex" id="pAdditionConteneur">
	    <mx:TextInput x="25" y="44" width="235" id="txt_somme"/>
	</mx:Panel>
	
</mx:Application>
<html>
<head>
    <title>Calcul de sommes</title>
</head>

<script src="bridge/FABridge.js" ></script>

<SCRIPT LANGUAGE="JavaScript">
    function calculerActionscript(){
        var nombreA = parseInt(document.getElementById("nb_a").value);
        var nombreB = parseInt(document.getElementById("nb_b").value);
        var instanceFlex = FABridge.pontAjax.root();
        instanceFlex.calculActionScript(nombreA,nombreB);
    }
</SCRIPT>

<object id='fichierSWF' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' height='400' width='400'>
    <param name='src' value='JsFlex.swf'/>
    <param name='flashVars' value='bridgeName=pontAjax'/>
    <embed name='fichierSWF' src='JsFlex.swf' pluginspage='http://www.adobe.com/go/getflashplayer' height='100%' width='100%' flashvars="bridgeName=pontAjax"/>
</object>

<br/> <br/>
<h1>Flex-Ajax Bridge</h1>

<form>
    <label>Nombre A : </label>
    <input id="nb_a" />
    <br/>
    <label>Nombre B : </label>
    <input id="nb_b" />
    <br/>
    <button onClick="calculerActionscript()">Calculer</button>
</form>
<br/>

</body>
</html>
bridgeName=pontAjax
var instanceFlex = FABridge.pontAjax.root();
instanceFlex.calculActionScript(nombreA,nombreB);
{rpertoire dinstallation de Flex Builder 3}\sdks\3.0.0\frameworks\javascript\fabridge\src\bridge
//*
//* Modification du texte du champ txt_somme  partir de Javascript
/*
with(FABridge.pontAjax.root()){

    // Rcupration du composant getNomDuComposant()
    var txt = getTxt_somme();

    // Affectation de la nouvelle valeur setText()
    txt.setText("Bonjour!");
}
